<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
  <link rel="stylesheet" href="../../styles/common.css"/>
  <link rel="stylesheet" href="../../styles/page.css"/>
</head>

<body>
<div class="dashboard-container" id="open-app">
  <div class="container" style="width: 850px;float: left;">
    <el-table :data="ordersDish">
      <el-table-column prop="orderDetails" type="expand">
        <template slot-scope="scope">
          <!--增加索引值遍历，<标签 v-for="(变量名,索引变量) in 集合模型数据">，索引变量为初始值0 -->
          <div v-for="(od,i) in scope.row.orderDetails" style="color: #6b6b6b">
            <div style="margin-bottom: 10px">
              <span style="margin-right: 80px">{{od.name}}</span>
              <span style="margin-right: 80px">x{{od.number}}</span>
              <span>{{od.dishFlavor}}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="checkoutTime" label="下单时间" width="95"></el-table-column>
      <el-table-column prop="number" label="订单号" width="200" align="center"></el-table-column>
      <el-table-column prop="takeCode" label="取餐码" width="130"></el-table-column>
      <el-table-column prop="remark" label="备注" width="140"></el-table-column>
      <el-table-column label="操作" width="" align="center">
        <template slot-scope="scope">
          <el-button
                  type="text"
                  size="small"
                  @click="callTakeMeal(scope.row.number)"
                  :class="{notAdmin:user !== 'admin'}">
            呼叫取餐
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="container" style="width: 420px;float: right">
    <el-table :data="openDish">
      <el-table-column label="待取餐" align="center">
        <template slot-scope="scope">
          <span style="margin: 0 60px 0 80px;font-size: 16px">{{scope.row}}</span>
          <el-button
                  type="text"
                  size="small"
                  @click="haveTakeMeal(scope.row)"
                  :class="{notAdmin:user !== 'admin'}"
          >已取餐
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script>

  //每隔一秒刷新页面
  setTimeout('myrefresh()', 1000)

  new Vue({
    el: '#open-app',
    data() {
      return {
        ordersDish: [],
        openDish: []
      }
    },
    created() {
      this.init();
      //Vue定时任务，每隔指定时间调用一次函数
      window.setInterval(() => {
        setTimeout(this.init(), 0); //调用 init()
      }, 10000); //毫秒
    },
    mounted() {
    },
    methods: {
      init() {
        this.getRecentlyOrders();
        this.getOrdersTakeCode();
      },
      getRecentlyOrders() {
        axios({
          method: "get",
          url: "/open/orders"
        }).then((res) => {
          const resData = res.data;
          if (resData.code == 1) {
            this.ordersDish = resData.data;
          }
        })
      },
      getOrdersTakeCode() {
        axios({
          method: "get",
          url: "/open/takeCode"
        }).then((res) => {
          const resData = res.data;
          if (resData.code == 1) {
            this.openDish = resData.data;
          }
        })
      },
      callTakeMeal(id) {
        axios({
          method: "post",
          url: "/open",
          data: id
        }).then((res) => {
          const resDate = res.data;
          if (resDate.code == 1) {
            this.init()
          }
        })
      },
      haveTakeMeal(takeCode) {
        axios({
          method: "get",
          url: "/open/have?takeCode=" + takeCode,
        }).then((res) => {
          const resDate = res.data;
          if (resDate.code == 1) {
            this.init()
            this.$message.success(resDate.msg)
          } else {
            this.$message.error(resDate.msg)
          }
        })
      }
    }
  })
</script>
</body>
</html>